<webview> 標籤

<webview> 標籤
- 概要
- 參考

使用 <webview> 標籤將「訪客」內容（例如網頁）嵌入到您的應用程式中。<webview> 與 <iframe> 不同，它在與您的應用程式不同的程序中執行；它沒有與您的應用程式相同的權限，而且您的應用程式與嵌入式內容之間的所有互動都會是非同步的。這可讓您的應用程式免於嵌入式內容的威脅。

概要

若要將網頁嵌入至您的應用程式，請將 webview 標籤加入應用程式的嵌入器頁面（這是會顯示客體內容的應用程式頁面）。在最簡單的形式中，webview 標籤包含網頁的 src 和控制 webview 容器外觀的 css 樣式

<webview id="foo" src="http://www.google.com/" style="width:640px; height:480px"></webview>

參考

請參閱 Chrome <webview> 標籤文件，以取得詳細的 API 參考。

除了上游 API 之外，NW.js 還新增了下列方法

webview.showDevTools(show, [container])

show {boolean} 標記：開啟或關閉開發人員工具視窗
container {webview Element} 選用要用來顯示開發人員工具的 <webview> 元素。預設情況下，開發人員工具會顯示於新的視窗中。

開發人員工具擴充功能可用於嵌入式 webview。只要使用 --load-extensions 載入它們即可。應透過在擴充功能的 manifest.json 中加入額外的 webview 區段，並將屬性 partition='trusted' 加入 webview 標籤，讓容器 webview 變成受信任的。請參閱問題 #6004 中的範例

"webview": {
  "partitions": [
     {
       "name": "trusted",
       "accessible_resources": [
          "<all_urls>"
       ]
     }
  ]
}

webview.inspectElementAt(x, y)

使用 webview.showDevTools() 開啟開發人員工具後，可以呼叫此函式來檢查位於 (x, y) 的元素。

在 webview 中載入本機檔案

將下列權限加入至清單

  "webview": {
     "partitions": [
        {
          "name": "trusted",
          "accessible_resources": [ "<all_urls>" ]
        }
     ]
  }

並將屬性 ‘partition=”trusted”’ 加入至 webview 標籤。

webview 中的 Node.js 支援

若要啟用 WebView 中的 Node.js 支援，請將 allownw 屬性加入至 webview 標籤。然後，不論是載入本機檔案或遠端網站，Node.js 都會開啟。請謹慎使用此功能，因為 webview 通常應載入不受信任的內容。

在主世界中執行腳本

Chrome 中的 executeScript 函式讓您能將 JS 程式碼注入至 webview，但會在一個隔離的世界中。若要存取目標 DOM 環境中的 JS 物件，您可以將程式碼注入至主世界環境中。只要將 {mainWorld: true} 加入函式的 InjectDetails 型別參數即可。

webview 中的 Cookie 支援

Webview 具有 ‘getCookieStoreId()’ 函式，會傳回可用於 chrome.cookies API 的 storeId。

主控台範例

讓我們假設您有一個簡單的 NW.js 應用程式，其中包含 webview。

在主控台中顯示所有 Cookie，例如 https://nwjs.dev.org.tw（要在那裡取得一些 Cookie，您需要先造訪該頁面）

chrome.cookies.getAll({url:"https://nwjs.dev.org.tw", storeId:webview.getCookieStoreId()}, console.log.bind(console));